<template>
	<scroll-view class="business" id="business" scroll-y="true" :scroll-top="scrollTop" @scroll="scrollFn">
		<view class="a2z">
			<view class="item" :class="activeRight == item ? 'active' : ''" @click="a2zFn(item)" v-for="(item, index) in indexList" :key="index">
				{{ item }}
			</view>
		</view>
		<view class="business-wrapper">
			<div class="business-wrapper-top">当前显示人群仅为参加产业对接会的用户</div>
			<view class="business-list" v-for="(item, index) in comList" :key="index" :id="'abc' + index" @click="toChat(item)">
				<image class="img" :src="item.avatarUrl" mode="" mode="aspectFill"></image>
				<view class="top">
					<view class="big">{{ item.personName }}</view>
					<view class="small" v-if="item['industryValue' + En]">{{ item['industryValue' + En] }}</view>
				</view>
				<view class="bottom ellipsis1" v-if="item.fieldDirectionList && item.fieldDirectionList.length">· {{ item.fieldDirectionList.map(x => x['name' + En]).join(' · ') }}</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import protal from "@/api/protal"
	export default {
		data() {
			return {
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
				scrollTop: 0,
				activeRight: 'A',
				comList: [],
				timer: null,
				oldScrollTop: 0
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				const params = {
					pageNum: 1,
					pageSize: 9999
				}
				protal.businesscardlist(params).then(res => {
					this.comList = res.data
				})
			},
			a2zFn(item) {
				const index = this.comList.findIndex(x => x.initials == item)
				this.scrollTop = index * 87
				// this.scrollTop = item
			},
			scrollFn(v) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if (v.detail.scrollTop === this.oldScrollTop) { // 动画结束
						this.setActiveScroll()
					}
				}, 300)
				this.oldScrollTop = v.detail.scrollTop
			},
			setActiveScroll() {
				const index = parseInt(this.oldScrollTop / 87)
				this.activeRight = this.comList[index].initials
			},
			toChat(item) {
				uni.navigateTo({
					url: `/pages/chat/index?personUuid=${ item.personUuid }`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.business {
		height: 100%;
		overflow: hidden;
		position: relative;

		.business-wrapper {
			
			.business-wrapper-top {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 12px;
				color: #8A8E99;
				line-height: 16px;
				text-align: center;
				font-style: normal;
				padding-top: 18px;
			}

			.business-list {
				width: 686rpx;
				height: 87px;
				padding: 18px 0 0 65px;
				margin: 0 auto;
				box-sizing: border-box;
				position: relative;
				border-bottom: 1px solid rgba(138, 142, 153, 0.30);

				.img {
					position: absolute;
					left: 0;
					top: 18px;
					width: 51px;
					height: 51px;
					border-radius: 8px;
				}

				.top {
					display: flex;
					padding-top: 4px;

					.big {
						font-family: AlibabaPuHuiTi_3_75_SemiBold;
						font-size: 16px;
						color: #0A0F1A;
						line-height: 16px;
						text-align: left;
						font-style: normal;
					}

					.small {
						margin-left: 6px;
						height: 16px;
						background: rgba(60, 45, 170, 0.1);
						border-radius: 2px;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 10px;
						padding: 0 4px;
						color: #3C2DAA;
						line-height: 14px;
						text-align: left;
						font-style: normal;
						display: flex;
						align-items: center;
					}
				}

				.bottom {
					margin-top: 8px;
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 12px;
					color: #0A0F1A;
					line-height: 14px;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.a2z {
		position: fixed;
		right: 4px;
		margin-top: 51px;

		.item {
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 10px;
			color: #8A8E99;
			line-height: 1;
			font-style: normal;
			border-radius: 50%;

			&.active {
				background: #3C2DAA;
				color: #FFFFFF;
			}
		}
	}
</style>